<template>
  <div v-if="visible" class="image-viewer">
    <!-- 遮罩层 -->
    <div class="mask" @click.self="close"></div>
    
    <!-- 图片容器 -->
    <div class="image-container">
      <img 
        :src="currentImage" 
        :style="imageStyle"
        @click.self="close"
      />
    </div>
    <!-- 控制按钮 -->
    <div class="controls">
        <button @click="zoomIn">+</button>
        <button @click="zoomOut">-</button>
        <button @click="rotate">↻</button>
        <button @click="close">×</button>
        <!-- <button v-if="showNavigation" @click="prev">←</button>
        <button v-if="showNavigation" @click="next">→</button> -->
      </div>
  </div>
</template>

<script>
export default {
  props: {
    images: { type: Array, default: () => [] },    // 图片数组
    initialIndex: { type: Number, default: 0 },   // 初始图片索引
    visible: { type: Boolean, default: false }     // 是否显示
  },

  data() {
    return {
      currentIndex: 0,
      scale: 1,
      rotation: 0
    }
  },
  mounted(){
  },
  computed: {
    currentImage() {
      return this.images[this.initialIndex] || ''
    },

    imageStyle() {
      return {
        transform: `scale(${this.scale}) rotate(${this.rotation}deg)`,
        cursor: this.scale > 1 ? 'grab' : 'default'
      }
    },

    showNavigation() {
      return this.images.length > 1
    }
  },

  watch: {
    visible(newVal) {
      if (newVal) {
        document.addEventListener('keyup', this.handleKeyup)
      } else {
        document.removeEventListener('keyup', this.handleKeyup)
      }
    },
    initialIndex(val,old){
      console.info(val,'val')
      this.currentIndex = val
    }
  },

  methods: {
    close() {
      this.$emit('update:visible', false)
      this.resetTransform()
    },

    zoomIn() {
      this.scale = Math.min(this.scale + 0.2, 3)
    },

    zoomOut() {
      this.scale = Math.max(this.scale - 0.2, 0.5)
    },

    rotate() {
      this.rotation += 90
    },

    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length
      this.resetTransform()
      this.currentImage = this.images[this.currentIndex]
    },

    next() {
      this.currentIndex = (this.currentIndex + 1) % this.images.length
      this.resetTransform()
      this.currentImage = this.images[this.currentIndex]
    },

    resetTransform() {
      this.scale = 1
      this.rotation = 0
    },

    handleKeyup(e) {
      if (e.key === 'Escape') this.close()
      if (e.key === 'ArrowLeft') this.prev()
      if (e.key === 'ArrowRight') this.next()
    }
  }
}
</script>

<style scoped>
.image-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.image-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img {
  max-width: 90vw;
  max-height: 90vh;
  transition: transform 0.3s;
  user-select: none;
}

.controls {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: rgba(0, 0, 0, 0.9);
}
</style>